<template>
    <div>
      <el-card class="box-card" v-loading="loading">
        <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
        <div class="search-box">
            <div>
              <el-input placeholder="请输入内容" v-model="info.varietyName" class="input-with-select" style="width: 400px;">
                <el-button slot="append"  type="success"  @click="findAllVariety">搜索</el-button>
              </el-input>
            </div> 
          <el-button   type="success"  @click="addRow">同步品种</el-button>
        </div>
         <div class="img-box">
              <div v-for="item in tableData" :key="item.id" class="type-item" @click="editRow(item)">
                    <img :src="item.varietyPicture" alt="无图" class="type-img" />
                    <span class="type-name">{{item.varietyName}}</span>
              </div>
         </div>
         <div class="pagination-box">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="info.pageNum"
            :page-size="info.pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
         </div>
      </el-card>
    </div>
  </template>
  <script>
  import {findAllVariety,synchronizationVarietyInfo} from '../util/api.js'
  export default {
    data() {
      return {
        info:{
          pageNum:1,
          pageSize:16,
          varietyName:"",
          varietyType:""
        },
        loading:false,
        total:0,
        tableData: [],
      }
    },
    mounted(){
     this.findAllVariety()
    },
    methods: {
     async findAllVariety(){
         let res= await findAllVariety(this.info)
         if(res.code!=200)return
        //  console.log(res)
         this.tableData = res.data.rows
         this.total = res.data.total
      },
      handleCurrentChange(val) {
          this.info.pageNum = val
          this.findAllVariety()
      },
     async addRow() {
        this.loading = true
        let res = await synchronizationVarietyInfo()
        if(res.code!=200)return
        this.$message.success("同步成功！")
        this.findAllVariety()
        this.loading = false
      },
      editRow(row){
        this.$router.push({
          path: '/varietyManagement/compile',
          query:{id:row.id}
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .box-card {
    width: 100%;
    margin: 14px 0;
    .search-box{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .pagination-box{
      width: 100%;
      padding: 20px;
      .el-pagination{
        text-align: right;
      }
    }
  }
  /deep/.el-input-group__append{
    background-color:#01B780;
    color: #ffffff;
  }
  .img-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    gap:30px;
    .type-item{
      width: 10%;
      display: flex;
      cursor: pointer;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      padding: 10px 0px;
      border-radius: 8px;
      background-color: #F7F7F7;
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
      
      .type-img{
        width: 100px;
        height: 100px;
        margin-bottom: 30px;
        border-radius: 50%;
        overflow: hidden;
      }
      // .type-name{
      //     width: 100%;
      //     word-break: break-all;
      //     text-overflow: ellipsis;
      //     white-space: inherit;
      //     text-align: center;
      // }
    }
  }
  </style>